
import React, { Component } from 'react';

// 1.0 引入antd-mobile中的Button组件
import { Button, Toast,TabBar } from 'antd-mobile';

// 导入路由模块
import { Route } from 'react-router-dom';
// 导入三个组件
import Index from '../Index';
import FindHouse from '../FindHouse';
import My from '../My';

// 3.0 导入antd-mobile样式文件
import 'antd-mobile/dist/antd-mobile.css'; 

// 4.0 导入scss
import './home.scss';

// 导入字体图标的样式文件
import '../../assets/fonts/iconfont.css';

class Home extends Component {
    state = {
        selectedTab: 'index',  // 负责控制当前选择哪一项
        hidden: false,  // false：隐藏tabbar组件，true:隐藏tabbar组件
        fullScreen: true,  // true：将tabbar切换全屏模式
    };
    
  
    render() { 
        // return (<div className="home">Home <br />
        // {/* 2.0 使用组件 */}
            // <Button type="warning" onClick={() => {
            //     Toast.info('这是Toast提示内容');
            //     // 跳转到CityList组件
            //     this.props.history.push('/citylist');
            // }}>这是一个按钮</Button>
        // </div>);

        return (
        <div>
         
                
                {/* 注册Index，findhouse，my三个组件的路由规则 */}
                <Route path="/home/index" component={ Index}></Route>
                <Route path="/home/findhouse" component={ FindHouse }></Route>
                <Route path="/home/my" component={ My }></Route>
       
            <div style={this.state.fullScreen ? { position: 'fixed', height: '50px', width: '100%', bottom: 0 } : { height: 400 }}>
            <TabBar
              unselectedTintColor="#949494"
              tintColor="#33A3F4"
              barTintColor="white"
              hidden={this.state.hidden}
            >
              <TabBar.Item
                title="首页"
                key="index"
                icon={<i className="iconfont icon-ind"></i>}
                selectedIcon={<i className="iconfont icon-ind"></i>}
                selected={this.state.selectedTab === 'index'}                
                onPress={() => {
                  this.setState({
                    selectedTab: 'index',
                  });
                    
                    // 利用编程式导航跳转到 /home/index
                    this.props.history.push('/home/index');
                }}
                data-seed="logId"
              >
               
              </TabBar.Item>
              <TabBar.Item
                title="找房"
                key="findhouse"
                icon={<i className="iconfont icon-findHouse"></i>}
                selectedIcon={<i className="iconfont icon-findHouse"></i>}
                selected={this.state.selectedTab === 'findhouse'}                
                onPress={() => {
                  this.setState({
                    selectedTab: 'findhouse',
                  });
                      // 利用编程式导航跳转到 /home/findhouse
                      this.props.history.push('/home/findhouse');
                }}
                data-seed="logId"
              >
              
            </TabBar.Item>
            <TabBar.Item
                title="我的"
                key="my"
                icon={<i className="iconfont icon-myinfo"></i>}
                selectedIcon={<i className="iconfont icon-myinfo"></i>}
                selected={this.state.selectedTab === 'my'}                
                onPress={() => {
                  this.setState({
                    selectedTab: 'my',
                  });
                      // 利用编程式导航跳转到 /home/my
                      this.props.history.push('/home/my');
                }}
                data-seed="logId"
              >
              
              </TabBar.Item>
              
            </TabBar>
                </div>
                </div>
        )
    }
}
 
export default Home;